<template>
  <div class="song-reviews">
    <Header title="音乐播放" go-back="true"></Header>
    <div class="reviews-all">
      <div class="reviews-song">
        <div class="img">
          <img :src="songUrl" alt="">
        </div>
        <h2>{{songName}}</h2>
        <p>{{singerName}}</p>
      </div>
      <div class="reviews-comment">
        <div class="re-title">
          <p>评论（{{commentList.length}}）</p>
        </div>
        <div class="publish" @click="publishComment">
          <span>发表评论</span>
        </div>
        <div class="won-title">
          <span>精彩评论</span>
        </div>
        <div class="wonderful-box">
          <div class="wrapper" ref="wrapper">
            <ul class="content">
              <li v-for="(n,index) in commentList" :key="index">
                <div class="arvar">
                  <img :src="n.user.avatarUrl" alt="">
                </div>
                <div class="text">
                  <p><span>{{n.user.nickname}}：</span>{{n.content}}</p>
                  <div class="prise">
                    <p>{{n.time | dateFmt}}</p>
                    <p class="p1" @click="likeBtn()" v-show="url1Show">
                      <img style="width: 24px" src="../../../assets/Image/Bpraise.png" alt="">
                      {{n.likedCount}}
                    </p>
                    <p class="p2" @click="unLikeBtn()" v-show="url2show">
                      <img src="../../../assets/Image/Rpraise.png" alt="">
                      {{n.likedCount}}
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade" :closeOnClickModal="false" class="popup-wrapper">
      <div class="popup-box">
        <div class="popup-title">
          <span>评论</span>
          <span @click="closeWrapper">X</span>
        </div>
        <div class="text-area">
          <!--keyup:键盘事件 input：用户输入时触发事件-->
          <textarea @keyup="writeConent" @input="writeConent" :placeholder="placeholder" maxlength="147" v-model="value"></textarea>
          <div class="text-num">
            <span>{{total-changeNum}}</span>
          </div>
        </div>
        <div class="popup-btn">
          <span>{{limit}}</span>
          <button @click="sendComment">评论</button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import BScroll from 'better-scroll'
import {songComment} from '../../../api/node'
import {loadSongId, loadSongUrl, loadSongName, loadSingerName} from '../../../api/storage'
import {Toast} from 'mint-ui'

export default {
  name: 'songReviews',
  data () {
    return {
      songUrl: loadSongUrl(),
      songName: loadSongName(),
      singerName: loadSingerName(),
      commentList: [],
      popupVisible: false,
      placeholder: '想说点什么',
      value: '', // 输入框的内容
      total: 147, // 输入框字数最大限度
      changeNum: 0, // 已经输入个数
      limit: '',
      url1Show: true, // 未点赞图标是否显示
      url2show: false, // 已点赞图标是否显示
      type1: 1, // 点赞方式 1为点赞
      type2: 0 // 点赞方式 1为取消点赞
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {click: true})
    })
  },
  created () {
    // 评论数据
    songComment(loadSongId()).then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.commentList = res.hotComments
        // console.log(this.commentList)
      }
    })
  },
  methods: {
    // 点赞
    likeBtn () {
      this.url1Show = false
      this.url2show = true
    },
    // 取消点赞
    unLikeBtn () {
      this.url1Show = true
      this.url2show = false
    },
    publishComment () {
      this.popupVisible = true
    },
    closeWrapper () {
      this.popupVisible = false
    },
    writeConent () {
      // 输入字数的变化
      this.changeNum = this.value.length
      var limitText = this.total - this.changeNum
      if (!limitText) {
        this.limit = '字数到达上限'
      } else {
        this.limit = ''
      }
    },
    sendComment () {
      this.popupVisible = false
      Toast({
        message: '评论发送',
        position: 'middle',
        duration: 3000
      })
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.song-reviews{
  width: 100%;
  height: 626px;
  padding-top: 50px;
  background: url("../../../assets/Image/playBg.png") no-repeat;
  background-size: 100% 100%;
  .reviews-all{
    width: 100%;
    position: absolute;
    z-index: 22;
    .reviews-song{
      width: 100%;
      text-align: center;
      padding-top: 10px;
      .img{
        width: 150px;
        height: 150px;
        text-align: center;
        display: inline-flex;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        img{
          width: 140px;
          height: 140px;
          border-radius: 50%;
          margin-left: 5px;
          margin-top: 5px;
        }
      }
      h2{
        color: rgba(255,190,0,1);
      }
      p{
        color: rgba(255,190,0,1);
        font-size: 13px;
      }
    }
    .reviews-comment{
      width: 100%;
      padding: 10px;
      .re-title{
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.6);
        p{
          font-size: 15px;
          color: #fff;
          line-height: 30px;
        }
      }
      .publish{
        width: 100%;
        height: 30px;
        margin-top: 5px;
        border: 1px solid #f2f2f2;
        background: rgba(255,255,255,0.5);
        span{
          line-height: 30px;
          margin-left: 5px;
        }
      }
      .won-title{
        width: 100%;
        padding-top: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        span{
          font-size: 15px;
          color: #fff;
          line-height: 30px;
        }
      }
      .wonderful-box{
        width: 95%;
        padding-top: 20px;
        height: 240px;
        position: absolute;
        display: flex;
        overflow: hidden;
        .wrapper{
          width: 100%;
          .content{
            width: 100%;
            li{
              display: flex;
              align-items: center;
              border-bottom: 1px solid rgba(255,255,255,0.1);
              .arvar{
                img{
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                }
              }
              .text{
                padding-left: 10px;
                p{
                  font-size: 15px;
                  color: #f2f2f2;
                  span{
                    color: peru;
                  }
                }
                .prise{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  p:first-child{
                    font-size: 12px;
                    color: #999;
                  }
                  .p1{
                    display: flex;
                    align-items: center;
                    img{
                      width: 24px;
                    }
                    color: #999;
                  }
                  .p2{
                    display: flex;
                    align-items: center;
                    img{
                      width: 24px;
                    }
                    color: #999;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .popup-wrapper{
    width: 90%;
    height: 29%;
    .popup-box{
      width: 100%;
      height: 100%;
      border: 1px solid #666;
      background: #fff;
      .popup-title{
        height: 40px;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          font-size: 15px;
        }
        span:first-child{
          color: #000;
          margin-left: 10px;
        }
        span:last-child{
          color: red;
          padding: 10px;
        }
      }
      .text-area{
        padding: 10px;
        position: relative;
        textarea{
          width: 100%;
          height: 90px;
          padding: 5px;
          outline: none;
        }
        .text-num{
          position: absolute;
          bottom: 15px;
          left: 15px;
          span{
            color: peru;
          }
        }
      }
      .popup-btn{
        width: 100%;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          color: #de172c;
        }
        button{
          width: 60px;
          height: 30px;
          background: #de172c;
          color: #fff;
          border: none;
        }
      }
    }
  }

}
</style>
